<template>
  <div style="width: 98%;margin: 1% auto 0;">
    <template>
      <el-form
        ref="vForm"
        :model="formData"
        :rules="rules"
        label-position="top"
        label-width="80px"
        size="large"
        @submit.native.prevent
      >
        <el-row>
          <el-col :span="24" class="grid-cell">
            <div class="static-content-item">
              <el-alert
                title="即将进行反馈信息查询"
                type="success"
                description="请根据提示填写查询信息"
                :closable="false"
                :center="true"
                :show-icon="true"
                effect="dark"
              />
            </div>
          </el-col>
        </el-row>
        <div class="static-content-item">
          <el-divider direction="horizontal" content-position="right" />
        </div>
        <el-row>
          <el-col :span="12" :offset="6" class="grid-cell">
            <el-form-item label="反馈人姓名：" prop="name" class="required label-center-align">
              <el-input
                v-model="formData.name"
                size="large"
                type="text"
                placeholder="请输入反馈人姓名"
                prefix-icon="el-icon-user-solid"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" :offset="6" class="grid-cell">
            <el-form-item label="反馈人身份证号码：" prop="id" class="required">
              <el-input
                v-model="formData.id"
                type="password"
                placeholder="请输入身份证号码"
                clearable
                :minlength="18"
                :maxlength="18"
                :show-word-limit="true"
                prefix-icon="el-icon-info"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="static-content-item">
          <el-divider direction="horizontal" content-position="left" />
        </div>
        <el-row>
          <el-col :span="24" class="grid-cell">
            <div class="static-content-item">
              <el-alert
                title="承诺："
                type="warning"
                description="我们保证用户数据仅用于提升产品使用"
                :closable="false"
                :center="true"
                :show-icon="true"
                effect="light"
              />
            </div>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <div class="button">
      <el-button type="primary" @click="submitForm">提 交 查 询 请 求</el-button>
    </div>
    <el-dialog title="您的反馈信息：" :visible.sync="dialogFormVisible">
      <div class="text">
        姓 名 ： {{ resData.name }}<br><br>
        性 别 ： {{ resData.sex }}<br><br>
        身 份 证 号 ： {{ resData.identify }}<br><br>
        联 系 电 话 ： {{ resData.tel }}<br><br>
        固 定 地 址 ： {{ resData.address }}<br><br>
        商 品 溯 源 码 ： {{ resData.productCode }}<br><br>
        商 品 名 称 ： {{ resData.productName }}<br><br>
        反 馈 信 息 ： {{ resData.feedbackInfo }}<br><br>
        反 馈 状 态 ： {{ resData.status }}<br><br>
        提 醒 ： {{ resData.note }}<br><br>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="resetForm">查 询 完 毕</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/request'

export default {
  name: 'ResultSearch',
  components: {},
  props: {},
  data() {
    return {
      dialogFormVisible: false,
      formData: {
        name: '',
        id: ''
      },
      resData: {
        name: '',
        sex: '',
        identify: '',
        tel: '',
        email: '',
        address: '',
        productCode: '',
        productName: '',
        feedbackInfo: '',
        status: '',
        note: ''
      },
      rules: {
        name: [{
          required: true,
          message: '姓名不可为空'
        }, {
          pattern: /^[一-龥]+$/,
          trigger: ['blur', 'change'],
          message: '请填写中文名'
        }],
        id: [{
          required: true,
          message: '身份证号不可为空'
        }, {
          pattern: /^[A-Za-z0-9]+$/,
          trigger: ['blur', 'change'],
          message: '请检查输入'
        }]
      }
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    submitForm() {
      this.$refs['vForm'].validate(valid => {
        if (!valid) {
          this.$message({
            type: 'warning',
            message: '请检查输入'
          })
          return
        }
        // TODO: 提交表单
        request.get('/unReadFeedback/findOne', {
          params: {
            identify: this.formData.id,
            name: this.formData.name
          }
        }).then(res => {
          if (res.code === 20000) {
            this.$notify({
              type: 'success',
              message: '查询成功!反馈信息企业未处理',
              offset: 70
            })
            this.resData.name = res.data.name
            this.resData.sex = res.data.sex
            this.resData.identify = res.data.identify
            this.resData.tel = res.data.tel
            this.resData.email = res.data.email
            this.resData.address = res.data.address
            this.resData.productCode = res.data.productCode
            this.resData.productName = res.data.productName
            this.resData.feedbackInfo = res.data.feedbackInfo
            this.resData.status = '反馈信息已提交，企业待阅读'
            this.resData.note = '死鬼，还不读'
            this.dialogFormVisible = true
            return
          } else {
            request.get('/readFeedback/findOne', {
              params: {
                identify: this.formData.id,
                name: this.formData.name
              }
            }).then(response => {
              if (response.code === 20000) {
                this.$notify({
                  type: 'success',
                  message: '查询成功!反馈信息企业已知晓',
                  offset: 70
                })
                this.resData.name = response.data.name
                this.resData.sex = response.data.sex
                this.resData.identify = response.data.identify
                this.resData.tel = response.data.tel
                this.resData.email = response.data.email
                this.resData.address = response.data.address
                this.resData.productCode = response.data.productCode
                this.resData.productName = response.data.productName
                this.resData.feedbackInfo = response.data.feedbackInfo
                this.resData.status = '企业已阅读'
                this.resData.note = '感谢您的反馈，我们将持续改善我们的产品'
                this.dialogFormVisible = true
                return
              } else {
                this.$notify({
                  type: 'error',
                  message: response.msg,
                  offset: 70
                })
              }
            })
          }
        })
      })
    },
    resetForm() {
      this.$refs['vForm'].resetFields()
      this.dialogFormVisible = false
    }
  }
}
</script>

<style>
.button {
  display: flex;
  justify-content: center;
  margin-top: 2%;
}
.text {
  font-family: 华文行楷;
  font-size: 20px;
}
</style>

<style lang="scss">
.el-input-number.full-width-input,
.el-cascader.full-width-input {
  width: 100% !important;
}

.el-form-item--medium {
  .el-radio {
    line-height: 36px !important;
  }

  .el-rate {
    margin-top: 8px;
  }
}

.el-form-item--small {
  .el-radio {
    line-height: 32px !important;
  }

  .el-rate {
    margin-top: 6px;
  }
}

.el-form-item--mini {
  .el-radio {
    line-height: 28px !important;
  }

  .el-rate {
    margin-top: 4px;
  }
}

.clear-fix:before,
.clear-fix:after {
  display: table;
  content: "";
}

.clear-fix:after {
  clear: both;
}

.float-right {
  float: right;
}

</style>

<style lang="scss" scoped>
div.table-container {
  table.table-layout {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;

    td.table-cell {
      display: table-cell;
      height: 36px;
      border: 1px solid #e1e2e3;
    }
  }
}

div.tab-container {
}

.label-left-align ::v-deep .el-form-item__label {
  text-align: left;
}

.label-center-align ::v-deep .el-form-item__label {
  text-align: center;
}

.label-right-align ::v-deep .el-form-item__label {
  text-align: right;
}

.custom-label {
}

.static-content-item {
  min-height: 20px;
  display: flex;
  align-items: center;

  ::v-deep .el-divider--horizontal {
    margin: 0;
  }
}

</style>
